<template>
  <div class="comment-post">
    <van-field v-model.trim="message" autosize type="textarea" maxlength="50" placeholder="请输入评论内容" show-word-limit />
    <van-button type="default" size="small" @click="onPost" :disabled="!message">发布</van-button>
  </div>
</template>

<script>
import { addComment } from '@/api/comment.js'
export default {
  name: 'commentPost',

  props: {
    // 文章ID
    target: {
      type: [Number, String, Object],
      required: true
    },
    // 评论ID
    articleId: {
      type: [Number, String, Object],
      default: null
    }
  },

  data() {
    return {
      // 评论框内容
      message: ''
    }
  },

  methods: {
    // 发布评论
    async onPost() {
      const res = await addComment({
        target: this.target.toString(), // 评论的目标 id（评论文章即为文章id，对评论进行回复则为评论id）
        content: this.message, // 评论内容
        art_id: this.articleId ? this.articleId.toString() : null
      })
      this.$toast.success('发布成功')
      // 通知父组件关闭弹出层,回传评论信息
      this.$emit('post-success', res)
      // 重置输入框
      this.message = ''
    }
  }
}
</script>

<style lang='less' scope>
.comment-post {
  display: flex;
  align-items: center;
  padding: 14px;
}
</style>
